// 菜单的显示  隐藏
const navMenu = document.querySelector('#nav-menu')
const navToggle = document.querySelector('#nav-toggle')
const navClose = document.querySelector('#nav-close')

// nav-toggle存在
if (navToggle) {
    navToggle.addEventListener('click', () => {
        // 展示菜单
        navMenu.classList.add('show-menu')
    })
}
if (navClose) {
    navClose.addEventListener('click', () => {
        // 隐藏菜单
        navMenu.classList.remove('show-menu')
    })
}

// 移除菜单
const navLink = document.querySelectorAll('.nav-link')
function linkAction() {
    const navMenu = document.querySelector('#nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(link => link.addEventListener('click', linkAction))

// 改变头部背景颜色
function scrollHeader() {
    const header = document.getElementById('header')
    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
    if (this.scrollY >= header.offsetHeight) {
        header.classList.add('scroll-header')
    } else {
        header.classList.remove('scroll-header')
    }
}
window.addEventListener('scroll', scrollHeader)

// 返回顶部
function scrollUp() {
    const scrollUp = document.getElementById('scroll-up')
    // 460自行设置
    if (this.scrollY >= 460) {
        scrollUp.classList.add('show-scroll')
    } else {
        scrollUp.classList.remove('show-scroll')
    }
}
window.addEventListener('scroll', scrollUp)

// 滚动 sections 链接高亮 属性选择器
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
    // 只读属性
    const scrollY = window.pageYOffset
    sections.forEach(current => {
        const sectionHeight = current.offsetHeight
        // -58 保证第一个link显示  更利于效果   58可以是其他值  根据情况设置
        const sectionTop = current.offsetTop - 58
        const sectionId = current.getAttribute('id')
        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
        } else {
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
        }
    })
}
window.addEventListener('scroll', scrollActive)

/*=============== scroll reveal animate ===============*/
const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: 2500,
    delay: 400,
    //reset: true //Animations repeat
});

sr.reveal(`.home-data, .footer-content, .footer-logo, .footer-description`)
sr.reveal(`.home-tree-1`, { origin: 'left', delay: 800 })
sr.reveal(`.home-tree-2`, { origin: 'right', delay: 800 })
sr.reveal(`.home-img`, { delay: 800 })
sr.reveal(`.category-card, .items-card`, { interval: 100 })
sr.reveal(`.about-img, .about-data, .footer-tree-2`, { origin: 'left' })
sr.reveal(`.party-images, .party-data, .footer-tree-1`, { origin: 'rigth' })